<template>
  <div class="select-lottery" v-if="!getIsPhone" ref="wrapper">
    <div class="banner">
      <div class="slider-wrapper">
        <!-- <banner-slider></banner-slider> -->
      </div>
    </div>
    <div class="navbar-wrapper" ref="tabbar">
      <nav-bar 
        :lotterys="lotterys"
        :currentTabIndex="currentTabIndex"
        @click="updateCurrentTabIndex"
        >
      </nav-bar>
    </div>
    <div class="main-wrapper">
      <div class="main" ref="padT">
        <div 
          v-for="(item) in lotterys" 
          :key="item.id" 
          class="lottery" 
          ref="navbox">
          <info-card 
            class="sub" 
            v-for="info in item.content" 
            :lotteryInfo="info" 
            :key="info.id">
          </info-card>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="select-lottery-phone">
    <div class="fixed">
      <header-template-phone>
        <template v-slot:center>
          购彩
        </template>
        <template v-slot:right>
          <div @click="checkTrends">
            <span class="icon">
              <i class="iconfont icongd_zoushitu" ></i>
            </span>
          </div>
        </template>
      </header-template-phone>
    </div>
    <div class="main">
      <div class="slider-wrapper">
        <!-- <banner-slider showPagination="true"></banner-slider> -->
      </div>
      <div class="nav-wrapper" ref="tabbar">
        <slider-nav 
          :list="list" 
          @click="updateCurrentTabIndex" 
          :currentTabIndex="currentTabIndex"
        ></slider-nav> 
      </div>
      <div class="lotterys" ref="lotterys">
        <div v-for="(item) in lotterys" :key="item.id" class="lottery" ref="navbox">
          <info-card-phone class="sub" v-for="info in item.content" :lotteryInfo="info" :key="info.id"></info-card-phone>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BuyLotteryBanner from '@/components/buy-lottery-banner/buy-lottery-banner'
import NavBar from '@/pages/buy-lottery/components/nav-bar'
import BannerSlider from '@/components/banner-slider/banner-slider'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import SliderNav from '@/components/slider-nav/slider-nav'
import InfoCardPhone from './components/info-card-phone'
import InfoCard from './components/info-card'
import FootnavPhone from '@/components/base/phone/footnav-phone/footnav-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import { mapGetters } from 'vuex';
export default {
  components: {
    BuyLotteryBanner,
    NavBar,
    HeaderTemplatePhone,
    BannerSlider,
    SliderNav,
    InfoCardPhone,
    InfoCard,
    FootnavPhone,
    HeaderBack
  },
  data() {
    return {
      // 购彩页面数据
      lotterys: [
        {
          id: 1,
          tab: '时时彩',
          content: [
            {
              id: 1,
              tab: '时时彩',
              type: '重庆时时彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconicon_chongqingshishi',
              path: '/select-number/cqssc'
            },
            {
              id: 2,
              tab: '时时彩',
              type: '极速时时彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconicon_jisushishicai'
            },
            {
              id: 3,
              tab: '时时彩',
              type: '天津时时彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: 'iconicon_tianjinshishica'
            },
            {
              id: 4,
              tab: '时时彩',
              type: '新疆时时彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              bg: require('@/assets/imgs/caizhong_bj_04.svg'),
              icon: 'iconicon_xinjiangshishic'
            },
          ]
        },
        {
          id: 2,
          tab: '11选5',
          content: [
            {
              id: 1,
              tab: '11选5',
              type: '山东11选5',
              dateNo: '119219',
              drawTime: new Date().getTime() + 100000000,
              bg: require('@/assets/imgs/caizhong_bj_08.svg'),
              icon: 'iconicon_shandongxuan'
            },
            {
              id: 2,
              tab: '11选5',
              type: '广东11选5',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              bg: require('@/assets/imgs/caizhong_bj_07.svg'),
              icon: 'iconicon_guangdongxuan'
            },
            {
              id: 3,
              tab: '11选5',
              type: '极速11选5',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              path: '/select-number/11xuan5',
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconCZ_Icon_jisuxuan'
            },
          ]
        },
        {
          id: 3,
          tab: '快三',
          content: [
            {
              id: 1,
              type: '幸运快三',
              tab: '快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              bg: require('@/assets/imgs/caizhong_bj_03.svg'),
              icon: 'iconLy_kuai_xingyun',
              path: '/select-number/xyks'
            },
            {
              id: 2,
              tab: '快三',
              type: '安徽快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_04.svg'),
              icon: 'iconicon_anhuikuaisan'
            },
            {
              id: 3,
              tab: '快三',
              type: '甘肃快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_08.svg'),
              icon: 'iconLy_kuai_gansu'
            },
            {
              id: 4,
              tab: '快三',
              type: '广西快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_07.svg'),
              icon: 'iconLy_kuai_guangxi'
            },
            {
              id: 5,
              tab: '快三',
              type: '贵州快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_06.svg'),
              icon: 'iconLy_kuai_guizhou'
            },
            {
              id: 6,
              tab: '快三',
              type: '湖北快三',
              dateNo: '119219',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_05.svg'),
              icon: 'iconLy_kuai_hubei'
            },
          ]
        },
        {
          id: 4,
          tab: '赛车',
          content: [
            {
              id: 1,
              tab: '赛车',
              type: '北京赛车',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              path: '/select-number/bjsc',
              bg: require('@/assets/imgs/caizhong_bj_06.svg'),
              icon: 'iconicon_jisupk'
            },
            {
              id: 2,
              tab: '赛车',
              type: '幸运飞艇',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: 'iconCZ_Icon_xingyunfeiti'
            },
            {
              id: 3,
              tab: '赛车',
              type: '极速赛车',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconCZ_Icon_beijingsaich'
            },
            {
              id: 4,
              tab: '赛车',
              type: '极速飞艇',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: ''
            },
          ]
        },
        {
          id: 5,
          tab: 'P蛋蛋',
          content: [
            {
              id: 1,
              tab: 'P蛋蛋',
              type: '北京28',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              path: '/select-number/bj28',
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: 'iconly_jianada'
            },
            {
              id: 2,
              tab: 'P蛋蛋',
              type: '幸运28',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconly_jianada'
            },
          ]
        },
        {
          id: 6,
          tab: '六合彩',
          content: [
            {
              id: 1,
              tab: '六合彩',
              type: '香港六合彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              path: '/select-number/xglhc',
              bg: require('@/assets/imgs/caizhong_bj_03.svg'),
              icon: 'iconicon_xiangganghecai'
            },
            {
              id: 2,
              tab: '六合彩',
              type: '极速六合彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: 'iconCZ_Icon_jisuhecai'
            },
            {
              id: 3,
              tab: '六合彩',
              type: '十分六合彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconLy_hecai_shifen'
            },
          ]
        },
        {
          id: 7,
          tab: '其他',
          content: [
            {
              id: 1,
              tab: '其他',
              type: '福彩3d',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_01.svg'),
              icon: 'iconCZ_Icon_jisufucaiD'
            },
            {
              id: 2,
              type: '排列三',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_02.svg'),
              icon: 'iconicon_pailiesan'
            },
            {
              id: 3,
              type: '极速福彩3d',
              dateNo: '119217',
              drawTime: new Date().getTime() + 10000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_03.svg'),
              icon: 'iconCZ_Icon_jisufucaiD'
            },
            {
              id: 4,
              type: '腾讯分分彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_04.svg'),
              icon: 'iconly_shishicai_tengxun'
            },
            {
              id: 5,
              type: '日本1.5分彩',
              dateNo: '119217',
              drawTime: new Date().getTime() + 100000000,
              imgUrl: '',
              bg: require('@/assets/imgs/caizhong_bj_04.svg'),
              icon: 'iconicon_ribenydwfencai',
              
            },
          ]
        },
      ],
      currentTab: '',
      currentTabIndex: 0
    }
  },
  created() {
    this.height = []
    // 移动端和pc端的每个lottery类的margin-bottom的高度
    this.margin = this.getIsPhone ? 10 : 20
  },
  beforeDestroy() {
    this.removeListener()
  },
  mounted() {
    let last = 0
    for(let i = 0; i < this.$refs.navbox.length; i++) {
      let height = this.$refs.navbox[i].clientHeight + this.margin
      // console.log(this.$refs.navbox[i].offsetTop)

      this.height.push(last)
      last += height 
    }
    this.listenScroll()
  },
  methods: {
    setCurrentTab(tab) {
      this.currentTab = tab
    },
    updateCurrentTabIndex(index) {
      this.currentTabIndex = index 
      let el = this.$refs.navbox[index]
      window.scrollTo({
        top: this.height[index] + 185,
        behavior: "smooth"
      })
      console.log(document.documentElement.scrollTop)
    },
    // animateScroll(element,speed) {
    //   let rect=element.getBoundingClientRect();
    //   //获取元素相对窗口的top值，此处应加上窗口本身的偏移
    //   let top=window.pageYOffset+rect.top;
    //   let currentTop=0;
    //   let requestId;
    //   //采用requestAnimationFrame，平滑动画
    //   function step(timestamp) {
    //     currentTop+=speed;
    //     if(currentTop<=top){
    //       window.scrollTo(0,currentTop - 140);
    //       requestId=window.requestAnimationFrame(step);
    //     }else{
    //       window.cancelAnimationFrame(requestId);
    //     }
    //   }
    //   window.requestAnimationFrame(step);
    // },
    checkTrends() {
      this.$router.push({path: '/lottery/trends'})
    },
    // 监听滚动
    listenScroll() {
      this.tabBar = this.$refs.tabbar 
      // if (this.getIsPhone) {
        window.addEventListener('scroll', () => {
          this.scrollHandler()
          console.log(document.documentElement.scrollTop)
        }, true)
      // }
    },
    // 解除监听
    removeListener() {
      window.removeEventListener('scroll', () => {
          this.scrollHandler()
        }, true)
    },
    scrollHandler() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let width = document.documentElement.clientWidth||document.body.clientWidth
      let scrollHeight = this.getIsPhone ? width * 0.34 : 183
      let top = this.getIsPhone ? '48px': '128px'

      if (scrollTop >= scrollHeight) {
        this.tabBar.style.position = 'fixed'
        this.tabBar.style.top = top
        this.tabBar.style.right = 0
        this.tabBar.style.left = 0
        this.tabBar.style['z-index'] = 100
        this.$refs.padT.style.paddingTop = "45px"
        
      } else {
        this.tabBar.style.position = 'relative'
        this.tabBar.style.top = 0
        this.$refs.padT.style.paddingTop = 0
        
      }
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    list() {
      let ret = []
      this.lotterys.forEach((item, index) => {
        ret.push({tabname: item.tab, id: index})
      })
      return ret 
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
  .select-lottery
    .banner 
      width 100%
      height 183px
      padding-top 128px
      background #F4CDAC
      .slider-wrapper 
        width 1200px 
        margin 0 auto 
    .navbar-wrapper 
      width 100%
      background #fff
    .main-wrapper 
      

      .main
        width 1200px
        margin 0 auto
        box-sizing border-box 
        margin-top 20px 
        .lottery
          width 100%
          display flex
          flex-wrap wrap
          margin-bottom 20px
          padding 20px
          box-sizing border-box
          border-radius 3px
          background rgba(250,248,248,1)
          box-shadow 0px 5px 10px 0px rgba(0, 0, 0, 0.1)
          .sub 
            margin-right 10px
    .top
      position fixed
      right 0 
      left 0 
      top 128px
@media screen and (max-width 750px) 
  .select-lottery-phone 
    .fixed  
      position fixed 
      top 0
      right 0
      left 0
      z-index 1000
    .main 
      padding-top 48px
      padding-bottom 50px 
      .slider-wrapper >>> .swiper-pagination 
        left 50%
        text-align left
        .swiper-pagination-bullet
          background #e1dedb 
          &.swiper-pagination-bullet-active 
            background #dc9850
      .slider-wrapper  
        height 0 
        padding-bottom 34% 
        background #F4CDAC
      .nav-wrapper 
        background #fff
        box-sizing border-box 
      .nav-wrapper >>> .nav-item 
        padding 0 9px
      .lotterys 
        margin-top 10px 
        padding 0 10px 
        .lottery 
          display flex 
          flex-wrap wrap
          justify-content space-between 
          margin-bottom 10px 
          .sub 
            margin-bottom 10px
        

</style>